<template>
  <div class="container">
    <h1 class="title">咨询危机信息记录</h1>

    <div class="card main-card">
      <div class="card-header">
        <div class="icon-wrapper">
          <i class="fas fa-file-medical"></i>
        </div>
        <h2 class="card-title">危机咨询记录表单</h2>
      </div>

      <div class="form-content">
        <div class="form-group">
          <label class="form-label">
            <i class="fas fa-user-md"></i>
            咨询师
          </label>
          <select class="form-input">
            <option value="">选择咨询师</option>
            <option value="1">李明华 博士（危机干预专家）</option>
            <option value="2">张思雨 教授（临床心理学）</option>
            <option value="3">王建国 主任（注册心理师）</option>
            <option value="4">陈丽萍 博士（家庭治疗师）</option>
            <option value="5">赵天成 教授（创伤治疗师）</option>
          </select>
        </div>

        <div class="form-row">
          <div class="form-group half">
            <label class="form-label">
              <i class="far fa-calendar"></i>
              咨询日期
            </label>
            <input type="date" class="form-input" v-model="currentDate" />
          </div>
          <div class="form-group half">
            <label class="form-label">
              <i class="far fa-clock"></i>
              咨询时间
            </label>
            <input type="time" class="form-input" v-model="currentTime" />
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">
            <i class="fas fa-hourglass-half"></i>
            咨询时长（小时）
          </label>
          <div class="duration-input">
            <input
              type="number"
              step="0.5"
              min="0.5"
              max="8"
              class="form-input duration-value"
              placeholder="1.5"
            />
            <select class="form-input duration-unit">
              <option>小时</option>
            </select>
          </div>
          <p class="input-note">最小单位0.5小时</p>
        </div>

        <div class="form-group">
          <label class="form-label">
            <i class="fas fa-exclamation-triangle"></i>
            危机级别
          </label>
          <div class="crisis-levels">
            <div
              class="crisis-level low-risk"
              :class="{ selected: selectedLevel === 'low' }"
              @click="selectLevel('low')"
            >
              <i class="fas fa-check-circle"></i>
              <div class="level-name">低风险</div>
            </div>
            <div
              class="crisis-level medium-risk"
              :class="{ selected: selectedLevel === 'medium' }"
              @click="selectLevel('medium')"
            >
              <i class="fas fa-exclamation-circle"></i>
              <div class="level-name">中风险</div>
            </div>
            <div
              class="crisis-level high-risk"
              :class="{ selected: selectedLevel === 'high' }"
              @click="selectLevel('high')"
            >
              <i class="fas fa-radiation"></i>
              <div class="level-name">高风险</div>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">
            <i class="fas fa-clipboard-list"></i>
            咨询要点
          </label>
          <textarea
            class="form-input textarea"
            placeholder="记录咨询过程中的关键信息、来访者陈述、情绪状态、危机表现等..."
          ></textarea>
        </div>

        <div class="form-group">
          <label class="form-label">
            <i class="fas fa-binoculars"></i>
            观察与建议
          </label>
          <textarea
            class="form-input textarea"
            placeholder="记录您的专业观察、风险评估、干预措施以及后续建议..."
          ></textarea>
        </div>

        <div class="form-actions">
          <button class="btn-primary">
            <i class="fas fa-paper-plane"></i>
            提交记录
          </button>
          <button class="btn-reset">
            <i class="fas fa-redo"></i>
            重置
          </button>
        </div>
      </div>
    </div>

    <div class="card info-card">
      <div class="info-header">
        <div class="info-icon-wrapper">
          <i class="fas fa-info-circle"></i>
        </div>
        <div class="info-content">
          <h3 class="info-title">记录填写指南</h3>
          <ul class="info-list">
            <li><i class="fas fa-check-circle"></i> 请完整填写所有必填字段</li>
            <li><i class="fas fa-check-circle"></i> 危机级别评估需谨慎选择</li>
            <li>
              <i class="fas fa-check-circle"></i>
              咨询要点应包含关键信息和危机表现
            </li>
            <li>
              <i class="fas fa-check-circle"></i> 观察建议需包含具体干预措施
            </li>
            <li><i class="fas fa-check-circle"></i> 提交前请检查所有信息</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CrisisConsultationForm",
  data() {
    return {
      selectedLevel: "",
      currentDate: "",
      currentTime: "",
    };
  },
  mounted() {
    // 设置默认日期和时间
    const today = new Date();
    this.currentDate = today.toISOString().substr(0, 10);

    const hours = today.getHours().toString().padStart(2, "0");
    const minutes = today.getMinutes().toString().padStart(2, "0");
    this.currentTime = `${hours}:${minutes}`;
  },
  methods: {
    selectLevel(level) {
      this.selectedLevel = level;
    },
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css");

.container {
  font-family: "Noto Sans SC", sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
  line-height: 1.6;
  min-height: 100vh;
  padding: 32px 16px;
  box-sizing: border-box;
  max-width: 768px;
  margin: 0 auto;
}

.title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 32px;
  color: #374151;
}

.card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  margin-bottom: 32px;
}

.card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

.main-card {
  padding: 24px;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.icon-wrapper i {
  color: #6366f1;
  font-size: 20px;
}

.card-title {
  font-size: 24px;
  font-weight: 600;
  color: #374151;
  margin: 0;
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.form-label i {
  color: #6366f1;
  margin-right: 8px;
  font-size: 14px;
  width: 16px;
  text-align: center;
}

.form-input {
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  font-family: inherit;
  font-size: 16px;
}

.form-input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
  outline: none;
}

.form-row {
  display: flex;
  gap: 16px;
}

.half {
  flex: 1;
}

.duration-input {
  display: flex;
}

.duration-value {
  width: 300px;
  border-radius: 12px 0 0 12px;
}

.duration-unit {
  width: 96px;
  border-radius: 0 12px 12px 0;
  border-left: none;
}

.input-note {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

.crisis-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.crisis-level {
  padding: 12px;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.crisis-level:hover {
  transform: translateY(-3px);
}

.crisis-level.selected {
  border-color: currentColor;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.crisis-level i {
  font-size: 24px;
  margin-bottom: 4px;
}

.level-name {
  font-weight: 500;
}

.low-risk {
  color: #10b981;
}

.medium-risk {
  color: #f59e0b;
}

.high-risk {
  color: #ef4444;
}

.textarea {
  height: 128px;
  resize: vertical;
}

.form-actions {
  display: flex;
  gap: 16px;
  padding-top: 16px;
}

.btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 16px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3),
    0 4px 6px -2px rgba(99, 102, 241, 0.05);
}

.btn-primary i {
  margin-right: 8px;
}

.btn-reset {
  background-color: #f3f4f6;
  color: #374151;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 16px;
}

.btn-reset:hover {
  background-color: #e5e7eb;
}

.btn-reset i {
  margin-right: 8px;
}

.info-card {
  background-color: #eef2ff;
  border: 1px solid #c7d2fe;
  padding: 24px;
}

.info-header {
  display: flex;
  align-items: flex-start;
}

.info-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}

.info-icon-wrapper i {
  color: #6366f1;
}

.info-content {
  flex: 1;
}

.info-title {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  margin-top: 0;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: #374151;
}

.info-list li {
  display: flex;
  align-items: center;
}

.info-list i {
  color: #6366f1;
  margin-right: 8px;
  font-size: 14px;
}

@media (max-width: 640px) {
  .form-row {
    flex-direction: column;
    gap: 24px;
  }

  .crisis-levels {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }
}
</style>
